import React, { useState } from 'react';
import styled from 'styled-components';
import { Button, Toast, Empty } from 'antd-mobile';
import { useTranslation } from 'react-i18next';
import { PageLayout } from '@/components/grid/PageLayout';
import UploadModal from '@/components/upload/UploadModal';
import { useSelector } from 'react-redux';
import { AddOutline, PictureOutline } from 'antd-mobile-icons';

const UploadPage: React.FC = () => {
  const { t } = useTranslation();
  const theme = useSelector((state: any) => state.theme);
  const [visible, setVisible] = useState(false);
  const [images, setImages] = useState<string[]>([]);

  const handleSubmit = async (newImages: string[]) => {
    try {
      // 这里可以添加实际的上传逻辑
      await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟上传延迟
      setImages(prev => [...prev, ...newImages]);
      Toast.show({
        icon: 'success',
        content: t('上传.批量上传成功'),
      });
    } catch (error) {
      Toast.show({
        icon: 'error',
        content: t('上传.上传失败'),
      });
    }
  };

  const handleDelete = (index: number) => {
    setImages(prev => prev.filter((_, i) => i !== index));
    Toast.show({
      icon: 'success',
      content: t('上传.删除成功'),
    });
  };

  return (
    <PageLayout title={t('上传.标题')}>
      <Container>
        <UploadSection $theme={theme}>
          <Button
            onClick={() => setVisible(true)}
            size="large"
            block
            style={{
              borderRadius: '12px',
              height: '48px',
              fontSize: '16px',
            }}
          >
            <ButtonContent>
              <AddOutline fontSize={20} />
              <span>{t('上传.上传图片')}</span>
            </ButtonContent>
          </Button>
        </UploadSection>

        {images.length > 0 ? (
          <ImageList>
            <ListHeader>
              <PictureOutline fontSize={20} />
              <span>{t('上传.已上传的图片')}</span>
              <Count $theme={theme}>({images.length})</Count>
            </ListHeader>
            <Grid>
              {images.map((image, index) => (
                <ImageItem key={index} $theme={theme}>
                  <img src={image} alt={`uploaded-${index}`} />
                  <DeleteButton
                    onClick={() => handleDelete(index)}
                    $theme={theme}
                  >
                    ×
                  </DeleteButton>
                  <Overlay>
                    <PreviewButton
                      onClick={() => {
                        // 添加预览逻辑
                      }}
                    >
                      {t('上传.预览')}
                    </PreviewButton>
                  </Overlay>
                </ImageItem>
              ))}
            </Grid>
          </ImageList>
        ) : (
          <EmptyState>
            <Empty
              description={t('上传.暂无图片')}
              imageStyle={{ width: 128 }}
            />
          </EmptyState>
        )}

        <UploadModal
          visible={visible}
          onClose={() => setVisible(false)}
          onSubmit={handleSubmit}
          maxCount={9}
          title={t('上传.上传图片')}
        />
      </Container>
    </PageLayout>
  );
};

export default UploadPage;

const Container = styled.div`
  padding: 16px;
`;

const UploadSection = styled.div<{ $theme: string }>`
  margin-bottom: 24px;

  .adm-button {
    background: var(--adm-color-primary);
    color: white;
    transition: all 0.3s ease;

    &:active {
      opacity: 0.8;
    }
  }

  ${props => props.$theme === 'pink' && `
    .adm-button {
      background: linear-gradient(to right, #EC4899, #F472B6);
    }
  `}

  ${props => props.$theme === 'green' && `
    .adm-button {
      background: linear-gradient(to right, #10B981, #34D399);
    }
  `}

  ${props => props.$theme === 'sky' && `
    .adm-button {
      background: linear-gradient(to right, #0EA5E9, #38BDF8);
    }
  `}
`;

const ButtonContent = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
`;

const ImageList = styled.div`
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
`;

const ListHeader = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--adm-color-text);
  font-size: 16px;
  font-weight: 600;
`;

const Count = styled.span<{ $theme: string }>`
  color: var(--adm-color-primary);
  font-size: 14px;

  ${props => props.$theme === 'pink' && `
    color: #EC4899;
  `}

  ${props => props.$theme === 'green' && `
    color: #10B981;
  `}

  ${props => props.$theme === 'sky' && `
    color: #0EA5E9;
  `}
`;

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
`;

const ImageItem = styled.div<{ $theme: string }>`
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--adm-color-box);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    ${props => props.$theme === 'pink' && `
      box-shadow: 0 4px 12px rgba(236, 72, 153, 0.1);
    `}

    ${props => props.$theme === 'green' && `
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
    `}

    ${props => props.$theme === 'sky' && `
      box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1);
    `}
  }
`;

const DeleteButton = styled.button<{ $theme: string }>`
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  transition: all 0.3s ease;

  ${ImageItem}:hover & {
    opacity: 1;
  }

  &:hover {
    background: var(--adm-color-danger);
  }
`;

const Overlay = styled.div`
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;

  ${ImageItem}:hover & {
    opacity: 1;
  }
`;

const PreviewButton = styled.button`
  background: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  color: var(--adm-color-text);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: white;
    transform: scale(1.05);
  }
`;

const EmptyState = styled.div`
  padding: 32px 0;
  background: white;
  border-radius: 12px;
  text-align: center;
`; 